<template>
  <div class="app-container" v-loading="loading">
    <el-tabs v-model="queryParams.grouping" @tab-click="getList" >
      <el-tab-pane label="微信" name="wechat">
      </el-tab-pane>
      <el-tab-pane label="支付宝" name="alipay"></el-tab-pane>
      <el-tab-pane label="招商银行" name="zs"></el-tab-pane>
      <el-tab-pane label="聚合接口" name="juHe"></el-tab-pane>
    </el-tabs>
    <el-form :model="config" ref="form" size="small">
      <el-form-item v-for="(configItem,index) in config.configList" :key="index" :label="configItem.configName">
        <br/>
        <el-input v-if="configItem.type === 0" v-model="configItem.configValue" :placeholder="'请输入'+configItem.configName"></el-input>
        <FileUpload v-else-if="configItem.type === 1" :is-show-tip="false" :limit="1" v-model="configItem.configValue"></FileUpload>
        <el-select v-else-if="configItem.type === 2" @focus="handleFocus(configItem.configKey)" v-model="configItem.configValue" :placeholder="'请选择'+configItem.configName">
          <el-option v-if="configItem.configKey==='zh_back.busmod'" v-for="(item,index) in busMod" :key="index" :value="item.busmod" :label="item.modals"></el-option>
          <el-option v-if="configItem.configKey==='zh_back.pay.busmod'" v-for="(item,index) in payBusMod" :key="index" :value="item.busmod" :label="item.modals"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">提 交</el-button>
    </div>
  </div>
</template>

<script>

import { getBusmod } from '@/api/transfer/payslip'
import { addAccountConfig, listAccountConfig } from "@/api/system/accountConfig"

export default {
  name: "ecsConfig",
  data() {
    return {
      loading:false,
      queryParams:{
        grouping:"wechat",
      },
      config:{
        configList:[]
      },
      busMod:[],
      payBusMod:[]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询参数配置列表 */
    getList() {
      this.loading = true;
      listAccountConfig(this.queryParams).then(response => {
        if (response.rows.length>0){
          this.config.configList = response.rows;
        }else{
          if (this.queryParams.grouping === "wechat"){
            this.config.configList=[
              { "configName": "小程序appid", "configKey": "wechat.appid", "configValue": "", "type": 0, "grouping": "wechat"},
              { "configName": "小程序密钥", "configKey": "wechat.appSecret", "configValue": "", "type": 0, "grouping": "wechat" }
            ];
          }else if (this.queryParams.grouping === "alipay"){
            this.config.configList=[
              { "configName": "应用appid", "configKey": "ali.appId", "configValue": "", "type": 0, "grouping": "alipay"},
              { "configName": "应用私钥", "configKey": "ali.rsaPrivateKey", "configValue": "", "type": 0, "grouping": "alipay" },
              { "configName": "应用公钥证书", "configKey": "ali.appCertPath", "configValue": "", "type": 1, "grouping": "alipay"},
              { "configName": "根证书", "configKey": "ali.rootCertPath", "configValue": "", "type": 1, "grouping": "alipay" },
              { "configName": "公钥证书", "configKey": "ali.publicCertPath", "configValue": "", "type": 1, "grouping": "alipay" }
            ];
          }else if (this.queryParams.grouping === "zs"){
            this.config.configList=[
              { "configName": "解密对称公钥", "configKey": "zh_back.corp_key", "configValue": "", "type": 0, "grouping": "zs"},
              { "configName": "解密公钥", "configKey": "zh_back.signature_public_key", "configValue": "", "type": 0, "grouping": "zs" },
              { "configName": "代发业务模式编码", "configKey": "zh_back.buscod", "configValue": "", "type": 0, "grouping": "zs" },
              { "configName": "代发业务模式", "configKey": "zh_back.busmod", "configValue": "", "type": 2, "grouping": "zs"},
              { "configName": "支付业务模式编码", "configKey": "zh_back.pay.buscod", "configValue": "", "type": 0, "grouping": "zs" },
              { "configName": "支付业务模式", "configKey": "zh_back.pay.busmod", "configValue": "", "type": 2, "grouping": "zs"},
              { "configName": "企业编码", "configKey": "zh_back.corpNbr", "configValue": "", "type": 0, "grouping": "zs" },
              { "configName": "公钥", "configKey": "zh_back.publicKey", "configValue": "", "type": 0, "grouping": "zs"},
              { "configName": "客户私钥", "configKey": "zh_back.privateKey", "configValue": "", "type": 0, "grouping": "zs" },
              { "configName": "对称密钥", "configKey": "zh_back.symKey", "configValue": "", "type": 0, "grouping": "zs"},
              { "configName": "企业网银用户号", "configKey": "zh_back.uid", "configValue": "", "type": 0, "grouping": "zs" },
            ];
          }else if (this.queryParams.grouping === "juHe"){
            this.config.configList=[
              { "configName": "身份证实名认证", "configKey": "juHe.verifyStaffIdentityKey", "configValue": "", "type": 0, "grouping": "juHe" },
              { "configName": "银行卡四元素检测", "configKey": "juHe.verifyBankCardKey", "configValue": "", "type": 0, "grouping": "juHe" },
            ];
          }
        }
        this.loading = false;
      }).catch(()=>{
        this.loading = false;
      })
    },

    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          addAccountConfig(this.config.configList).then(response => {
            this.getList()
            this.$modal.msgSuccess("保存成功");
          });
        }
      });
    },
    handleFocus(e){
      // console.log(e)
      if (e === "zh_back.busmod"){
        const item = this.config.configList.find(v => v.configKey === "zh_back.buscod")
        getBusmod(item.configValue).then(res=>{
          this.busMod = res.data
        })
      }else if (e === "zh_back.pay.busmod"){
        const item = this.config.configList.find(v => v.configKey === "zh_back.pay.buscod")
        getBusmod(item.configValue).then(res=>{
          this.payBusMod = res.data
        })
      }
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('ecs/config/export', {
        ...this.queryParams
      }, `config_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style scoped lang="scss">
.app-container{
  width: 50%;
  .dialog-footer{
    display: flex;
    justify-content: center;
  }
}

</style>
